<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
        }

        header {
            background-color: #fff;
            padding: 15px 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
        }

        .header-logo {
            display: flex;
            align-items: center;
        }

        .header-logo img {
            height: 36px;
            margin-right: 10px;
        }

        .header-logo span {
            font-size: 20px;
            font-weight: bold;
            color: #31c27c;
        }

        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .section {
            margin-bottom: 40px;
        }

        .section-title {
            display: flex;
            font-size: 22px;
            justify-content: center;
            margin-bottom: 20px;
            color: #333;
            font-weight: normal;
        }

        .tabs {
            display: flex;
            gap: 24px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .tab {
            color: #666;
            text-decoration: none;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .tab.active {
            color: #31c27c;
            border-bottom: 2px solid #31c27c;
        }

        /* 歌单推荐样式 */
        .playlist-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .playlist-item {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .playlist-item:hover {
            transform: translateY(-5px);
        }

        .playlist-img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            display: block;
        }

        .playlist-info {
            padding: 12px;
        }

        .playlist-name {
            font-size: 14px;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .playlist-playcount {
            font-size: 12px;
            color: #999;
        }

        /* 新歌首发样式 */
        .new-songs {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
        }

        .search-box {
            display: flex;
            margin-bottom: 20px;
            justify-content: center;
        }

        .search-input {
            width: 200px;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 30px;
            font-size: 14px;
            outline: none;
        }

        .search-input:focus {
            border-color: #31c27c;
        }

        .song-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .song-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .song-item:last-child {
            border-bottom: none;
        }

        .song-img {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            object-fit: cover;
        }

        .song-info {
            flex: 1;
        }

        .song-name {
            font-size: 14px;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .song-artist {
            font-size: 12px;
            color: #999;
        }

        .song-duration {
            font-size: 12px;
            color: #999;
        }

        /* MV样式 */
        .mv-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .mv-item {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
        }

        .mv-img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
            display: block;
        }

        .mv-info {
            padding: 12px;
        }

        .mv-name {
            font-size: 14px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .mv-playcount {
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-logo">
            <img src="imgs/qqmusic.png" alt="QQ音乐">
            <span>QQ音乐</span>
        </div>
    </header>

    <main>
        <!-- 歌单推荐区域 -->
        <section class="section">
            <h2 class="section-title">歌单推荐</h2>
            <div class="tabs">
                <a href="#" class="tab active">为你推荐</a>
                <a href="#" class="tab">运动</a>
                <a href="#" class="tab">网络歌曲</a>
                <a href="#" class="tab">思念</a>
                <a href="#" class="tab">官方歌曲</a>
                <a href="#" class="tab">情歌</a>
            </div>

            <div class="playlist-container">
                <div class="playlist-item">
                    <img src="imgs/qqmusic.png" alt="歌单封面" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">摇滚女孩R&b | 只跟感觉走的旋律</div>
                        <div class="playlist-playcount">播放量：195.4万</div>
                    </div>
                </div>
                <div class="playlist-item">
                    <img src="imgs/qqmusic.png" alt="歌单封面" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">古风纯音乐 | 隐藏着东方韵味</div>
                        <div class="playlist-playcount">播放量：171.2万</div>
                    </div>
                </div>
                <div class="playlist-item">
                    <img src="imgs/qqmusic.png" alt="歌单封面" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">想开一家小酒馆，只等有故事的你</div>
                        <div class="playlist-playcount">播放量：202.3万</div>
                    </div>
                </div>
                <div class="playlist-item">
                    <img src="imgs/qqmusic.png" alt="歌单封面" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">好听英文歌×欧美 | 轻松搞定50首</div>
                        <div class="playlist-playcount">播放量：129.0万</div>
                    </div>
                </div>
                <div class="playlist-item">
                    <img src="imgs/qqmusic.png" alt="歌单封面" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">收集温柔 | 沉溺于慢时光里的光芒</div>
                        <div class="playlist-playcount">播放量：303.5万</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 新歌首发区域 -->
        <section class="section">
            <h2 class="section-title">新歌首发</h2>
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索歌曲">
            </div>
            <div class="tabs">
                <a href="#" class="tab active">最新</a>
                <a href="#" class="tab">内地</a>
                <a href="#" class="tab">港台</a>
                <a href="#" class="tab">欧美</a>
                <a href="#" class="tab">韩国</a>
                <a href="#" class="tab">日本</a>
            </div>

            <div class="new-songs">
                <div class="song-list">
                    <div class="song-item">
                        <img src="imgs/qqmusic.png" alt="歌曲封面" class="song-img">
                        <div class="song-info">
                            <div class="song-name">Seboboge</div>
                            <div class="song-artist">Baboo Revalo</div>
                        </div>
                        <div class="song-duration">02:46</div>
                    </div>
                    <div class="song-item">
                        <img src="imgs/qqmusic.png" alt="歌曲封面" class="song-img">
                        <div class="song-info">
                            <div class="song-name">如果人人都爱音乐</div>
                            <div class="song-artist">王搏</div>
                        </div>
                        <div class="song-duration">03:46</div>
                    </div>
                    <div class="song-item">
                        <img src="imgs/qqmusic.png" alt="歌曲封面" class="song-img">
                        <div class="song-info">
                            <div class="song-name">为何不拉起我</div>
                            <div class="song-artist">Rising群星</div>
                        </div>
                        <div class="song-duration">04:30</div>
                    </div>
                    <div class="song-item">
                        <img src="imgs/qqmusic.png" alt="歌曲封面" class="song-img">
                        <div class="song-info">
                            <div class="song-name">动物</div>
                            <div class="song-artist">李孝利</div>
                        </div>
                        <div class="song-duration">04:17</div>
                    </div>
                    <div class="song-item">
                        <img src="imgs/qqmusic.png" alt="歌曲封面" class="song-img">
                        <div class="song-info">
                            <div class="song-name">一路成长（《长月烬明》电视剧插曲）</div>
                            <div class="song-artist">摩登兄弟刘宇宁</div>
                        </div>
                        <div class="song-duration">03:55</div>
                    </div>
                    <div class="song-item">
                        <img src="imgs/qqmusic.png" alt="歌曲封面" class="song-img">
                        <div class="song-info">
                            <div class="song-name">向世界宣告的人（《排球少年》</div>
                            <div class="song-artist">阿部真央</div>
                        </div>
                        <div class="song-duration">04:00</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- MV区域 -->
        <section class="section">
            <h2 class="section-title">MV</h2>
            <div class="tabs">
                <a href="#" class="tab active">精选</a>
                <a href="#" class="tab">内地</a>
                <a href="#" class="tab">韩国</a>
                <a href="#" class="tab">港台</a>
                <a href="#" class="tab">欧美</a>
                <a href="#" class="tab">日本</a>
            </div>

            <div class="mv-container">
                <div class="mv-item">
                    <img src="imgs/qqmusic.png" alt="MV封面" class="mv-img">
                    <div class="mv-info">
                        <div class="mv-name">向世界宣告的人（《排球少年》主题曲）</div>
                        <div class="mv-playcount">58.0万</div>
                    </div>
                </div>
                <div class="mv-item">
                    <img src="imgs/qqmusic.png" alt="MV封面" class="mv-img">
                    <div class="mv-info">
                        <div class="mv-name">Sunroof (Remix)</div>
                        <div class="mv-playcount">353.4万</div>
                    </div>
                </div>
                <div class="mv-item">
                    <img src="imgs/qqmusic.png" alt="MV封面" class="mv-img">
                    <div class="mv-info">
                        <div class="mv-name">一路成长（《长月烬明》电视剧插曲）</div>
                        <div class="mv-playcount">41.2万</div>
                    </div>
                </div>
                <div class="mv-item">
                    <img src="imgs/qqmusic.png" alt="MV封面" class="mv-img">
                    <div class="mv-info">
                        <div class="mv-name">我讨厌你 远方的列车</div>
                        <div class="mv-playcount">11.0万</div>
                    </div>
                </div>
                <div class="mv-item">
                    <img src="imgs/qqmusic.png" alt="MV封面" class="mv-img">
                    <div class="mv-info">
                        <div class="mv-name">追梦赤子心（《声生不息》主题曲）</div>
                        <div class="mv-playcount">19.6万</div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>